<!-- 引⼊编辑器的CSS -->
<link rel="stylesheet" href="./dist/editor.md/css/editormd.min.css">
<!-- 引⼊编辑器JS -->
<script src="./dist/editor.md/editormd.min.js"></script>
<script src="./dist/editor.md/lib/marked.min.js"></script>
<script src="./dist/editor.md/lib/prettify.min.js"></script>
<script src="./dist/libs/tinymce/tinymce.min.js" defer></script>
<!-- 需要初始化编辑器的DIV
<div id="edit-article">
  textarea 也是⼀个表单控件，当在 editor.md 中编辑好的内容会关联这个⽂本域上 
  <textarea id="article_post_content" style="display: none;"></textarea>
</div> -->




<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">
          编辑
        </h2>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="row g-0">
        <div class="col d-flex flex-column">
          <div class="card-body">
            <!-- 文章Id -->
            <input type="text" id="edit_article_id" style="display: none;">
            <!-- 版块 -->
            <div class="row align-items-center">
              <div class="col-2">
                <h2 class="mb-4">版块</h2>
              </div>
              <div class="col-10">
                <h2 class="mb-4" id="edit_article_board_name"></h2>
              </div>
            </div>

            <!-- 标题 -->
            <div class="row">
              <div class="col-2">
                <h2 class="mb-4">标题</h2>
              </div>
              <div class="col-10">
                <!-- <h2 class="mb-4" id="edit_article_title"></h2> -->
                <input id="edit_article_title" type="text" class="form-control">
              </div>
            </div>

            <!-- 内容 -->
            <div class="row">
              <div class="col-2">
                <h2 class="mb-4">内容</h2>
              </div>
              <div class="col-10" style="height: 680px;">

                <div id="edit_article_content_area">
                  <!-- textarea也是一个表单控件，当在editor.md中编辑好的内容会关联这个文本域上 -->
                  <textarea id="edit_article_content" style="display: none;"></textarea>
                </div>

              </div>
            </div>
          </div>

          <div class="card-footer bg-transparent mt-auto">
            <!-- 操作区 结束 -->
            <div class="col-auto row g-2 justify-content-end">
              <div class="col-auto">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-tabler w-100" id="edit_article_submit">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                      <path d="M16 5l3 3"></path>
                    </svg>
                    <span>提交</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script>


  function initEdit(md) {
    // 编辑器设置
    editor = editormd("edit_article_content_area", {
      // // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
      // width: "100%",
      // // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
      // height: "calc(100% - 50px)",
      // // 编辑器中的初始内容
      markdown: md
      // 指定 editor.md 依赖的插件路径
      // path: "editor.md/lib/",
      // saveHTMLToTextarea: true // 
      // placeholder: md
    });
  }
  $(function () {
    // ========================== 获取文章详情 ==========================
    // 成功后，设置ID,版块名，标题，并初始编辑区同时设置正文initEditor(edit_article.content);
    $.ajax({
      type: 'get',
      url: 'article/getById?id=' + currentArticle.id,
      // 成功回调
      success: function (respData) {
        // ⽤状态码判断是否成功
        if (respData.code == 0) {
          // 初始化⻚⾯内容
          let edit_article = respData.data;
          // ID
          $('#edit_article_id').val(edit_article.id);
          // 版块名
          $('#edit_article_board_name').html(edit_article.board.name);
          // title
          $('#edit_article_title').val(edit_article.title);
          // content

          initEdit(edit_article.content);
          // $('#edit_article_content').val(edit_article.content);

        } else {
          // ⽇志
          console.log(respData.message);
          // 提⽰
          $.toast({
            heading: '提⽰',
            text: respData.message,
            icon: 'info'
          });
        }
      },
      error: function () {
        $.toast({
          heading: '错误',
          text: respData.message,
          icon: 'error'
        })
      }
    });

    // // ========================== 初始化编辑器 ========================== 
    // var editor;
    // function initEditor(md) {
    //   console.log('编辑区内容：' + md);
    //   editor = editormd("edit_article_content_area", {
    //     width: "100%",
    //     height: "100%",
    //     // theme : "dark",
    //     // previewTheme : "dark",
    //     // editorTheme : "pastel-on-dark",
    //     codeFold: true,
    //     markdown: md, // 处理编辑区内容
    //     //syncScrolling : false,
    //     saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
    //     searchReplace: true,
    //     watch: true,                    // 实时预览
    //     htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
    //     // toolbar  : false,             //关闭工具栏
    //     // previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
    //     emoji: true,
    //     taskList: true,
    //     tocm: true,         // Using [TOCM]
    //     tex: true,                     // 开启科学公式TeX语言支持，默认关闭
    //     // flowChart: true,               // 开启流程图支持，默认关闭
    //     // sequenceDiagram: true,         // 开启时序/序列图支持，默认关闭,
    //     placeholder: '开始创作...',     // 占位符
    //     path: "./dist/editor.md/lib/"
    //   });
    // }

    // ========================== 初始化编辑器 ==========================  
    var editor = editormd("edit_article_content_area", {
      width: "100%",
      height: "100%",
      // theme : "dark",
      // previewTheme : "dark",
      // editorTheme : "pastel-on-dark",
      codeFold: true,
      //syncScrolling : false,
      saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea 
      searchReplace: true,
      watch: true,                    // 实时预览
      htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了     
      // toolbar  : false,             //关闭⼯具栏
      // previewCodeHighlight : false, // 关闭预览 HTML 的代码块⾼亮，默认开启
      emoji: true,
      taskList: true,
      tocm: true,         // Using [TOCM]
      tex: true,                     // 开启科学公式TeX语⾔⽀持，默认关闭
      // flowChart: true,               // 开启流程图⽀持，默认关闭
      // sequenceDiagram: true,         // 开启时序/序列图⽀持，默认关闭, 
      placeholder: '',     // 占位符
      path: "./dist/editor.md/lib/"
    });

    // ========================== 处理提交修改事件 ========================== 
    $('#edit_article_submit').click(function () {
      // ID
      let articleIdEl = $('#edit_article_id');
      let articleTitleEl = $('#edit_article_title');

      if (!articleTitleEl.val()) {
        articleTitleEl.focus();
        // 提示
        $.toast({
          heading: '提示',
          text: '请输入文章标题',
          icon: 'warning'
        });
        return;
      }
      // content
      let articleContentEl = $('#edit_article_content');
      // 非空校验
      if (!articleContentEl.val()) {
        // 提示
        $.toast({
          heading: '提示',
          text: '请输入文章内容',
          icon: 'warning'
        });
        return;
      }

      // 构造修改对象
      let editArticle = {
        id: articleIdEl.val(),
        title: articleTitleEl.val(),
        content: articleContentEl.val()
      }
      // 发送修改请求, 成功后跳转至首页changeNavActive($('#nav_board_index'));
      $.ajax({
        type: 'post',
        url: 'article/modify',
        data: editArticle,
        // 成功回调
        success: function (respData) {
          // 提⽰
          $.toast({
            heading: '提⽰',
            text: '修改成功',
            icon: 'success'
          });
          // ⽤状态码判断是否成功
          if (respData.code == 0) {
            // 跳转⾄⾸⻚
            changeNavActive($('#nav_board_index'));
          } else {
            // ⽇志
            console.log(respData.message);
            // 提⽰
            $.toast({
              heading: '提⽰',
              text: respData.message,
              icon: 'info'
            });
          }
        },
        error: function () {
          $.toast({
            heading: '错误',
            text: respData.message,
            icon: 'error'

          })
        }
      });

    });

  });

  // 点击按钮时触发返回上一页的操作
  document.getElementById('backButton').addEventListener('click', function () {
    history.back();
  });
</script>


<!-- 欣赏欣赏欣赏 -->